<template>
	<div class="audit-wrapper">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :submit="handleAudit" />
		<div class="head">
			<span class="title">佣金审核</span>
			<div v-if="allowAudit" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					v-if="hasPermission('90810084')"
					type="success"
					@click="() => $refs.auditDialog.successOpen()"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_success_1')
							: $t('funds.fund_audit.audit_success_2')
					}}
				</el-button>
				<el-button
					v-if="hasPermission('90810084')"
					type="danger"
					@click="() => $refs.auditDialog.dangerOpen()"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_fail_1')
							: $t('funds.fund_audit.audit_fail_2')
					}}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<CommissionDetail :detailData="detailData" />

		<!-- 审核弹窗 -->
		<el-dialog
			:title="$t('funds.fund_audit.audit_dialog_title')"
			center
			:visible.sync="auditDialog.visible"
			width="630px"
			class="audit-dialog"
			@close="closeAuditDialog"
			:close-on-click-modal="false"
		>
			<el-form
				ref="reviwewForm"
				:model="auditDialog"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.components.remark')"
					prop="remark"
				>
					<el-input
						v-model="auditDialog.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						v-input="{ name: 'noEmpty' }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					:disabled="auditDialog.loading"
					@click="auditDialog.visible = false"
				>
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:disabled="auditDialog.loading"
					@click="openSeaMoonDialog(true)"
				>
					<i v-show="auditDialog.loading" class="el-icon-loading"></i>
					<span>{{ $t('common.submit') }}</span>
				</el-button>
			</div>
		</el-dialog>
		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import SeaMoonDialog from '@/components/SeaMoon'
import AuditConfirm from '@/components/AuditConfirm'
import CommissionDetail from '@/components/Funds/Commission/detail'

export default {
  components: {
    SeaMoonDialog,
    AuditConfirm,
    CommissionDetail
  },
  mixins: [list],
  props: {
    allowAudit: {
      type: Boolean,
      required: true
    },
    activeName: {
      type: String,
      required: true
    },
    detailData: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      // 审核弹窗
      auditDialog: {
        loading: false,
        visible: false,
        result: undefined,
        remark: undefined
      },
      seaMoon: {
        isAudit: false,
        visible: false,
        params: {}
      }
    }
  },
  computed: {
    formRules() {
      return {
        remark: [
          {
            required: true,
            message: this.$t('funds.fund_audit.form_rules_tip2'),
            trigger: 'blur'
          },
          {
            min: 2,
            max: 500,
            message: this.$t('funds.fund_audit.form_rules_tip2'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() { },
  mounted() {
  },
  methods: {
    onSeaMoonValidSucceed(data) {
      if (this.seaMoon.isAudit) {
        this.handleAudit()
      }
    },
    openSeaMoonDialog(isAudit) {
      this.$refs.reviwewForm.validate((valid) => {
        if (valid) {
          this.handleAudit()
        }
      })
    },
    goBack() {
      this.$emit('goBack')
    },
    // 一审二审弹窗
    openAuditDialog(status) {
      this.auditDialog.result = status
      this.auditDialog.visible = true
    },
    closeAuditDialog() {
      this.$refs.reviwewForm.resetFields()
    },
    handleAudit(form) {
      this.auditDialog.loading = true
      const params = {
        ids: [this.detailData.orderNo],
        auditStatus: form.status,
        remark: form.remark
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$api
        .getProxyCommissionCashAuditRecord(params)
        .then((res) => {
          loading.close()
          this.$message({
            type: 'success',
            message: this.$t('common.action_success')
          })
          this.visible = false
          this.auditDialog.loading = false
          this.$emit('goBack', true)
        })
        .catch(() => {
          loading.close()
          this.visible = false
          this.auditDialog.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>

.audit-wrapper {
	color: #666666;
	margin: 24px 16px 20px 16px;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
}

.audit-dialog {
	::v-deep .el-dialog__header {
		color: #909399;
		font-weight: 700;
		text-align: center;
	}
}

</style>
